
<template>
  <!-- 用户登录 -->
  <div class="ps-r">
    <!-- <iframe src="/static/html/index.html" frameborder="0" style="width: 100%;height: calc(100vh - 5px) ;" /> -->
    <div class="login-box">
      <div class="login-box-bg">
        <img class="login-left-bg" src="../../assets/login/login-bg-left.png" alt="">
        <!-- <img class="login-bg" src="../../assets/login/login-bg1.png" alt="">
        <img class="login-bg" src="../../assets/login/login-bg2.png" alt=""> -->
        <div class="slider">
          <transition-group name="flip-list" tag="div">
            <div v-for="(item, index) in imagesList" :key="index" class="slider-item" :class="transitionClass(index)">
              <img v-show="imgShow(index)" :src="item.url" class="login-bg">
            </div>
          </transition-group>
        </div>
      </div>
      <div class="login-left">
        <img class="logo-img" :src="logoUrl" alt="">
      </div>
      <div class="login-right">
        <div class="user-info">
          <div class="user-info-title mb32">欢迎登录</div>
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
            <div class="user-info-subtitle">账号</div>
            <el-form-item prop="deUserAccount">
              <div class="input-box">
                <el-input v-model="ruleForm.deUserAccount" prefix-icon="user-name-icon" clearable placeholder="请输入登录名" @keyup.native.enter="handleAccount" />
              </div>
            </el-form-item>
            <div class="user-info-subtitle mt28">密码</div>
            <el-form-item prop="dePassWord">
              <div class="input-box">
                <el-input ref="password" v-model="ruleForm.dePassWord" prefix-icon="password-icon" clearable placeholder="请输入登录密码" type="password" show-password @keyup.native.enter="handlePassword" />
              </div>
            </el-form-item>
            <!-- <div class="user-info-subtitle mt28">验证码</div>
            <el-form-item prop="code">
              <div class="flexbox">
                <div class="input-box input-code-box">
                  <el-input ref="code" v-model="ruleForm.code" prefix-icon="code-icon" clearable placeholder="请输入验证码" @keyup.native.enter="handleCode" />
                </div>
                <div class="code-img-box ml20">
                  <img class="code-img" :src="'data:image/png;base64,' + imageUrl" @click="getCode">
                </div>
              </div>
            </el-form-item> -->
          </el-form>
          <div class="mt20 remember-account">
            <el-checkbox v-model="isRemember">记住账号</el-checkbox>
            <span class="forgot-password-btn" @click="handleForgetPassword">忘记密码</span>
          </div>
          <button class="con-btn" @click="login">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { checkLoginByAccount, getCode } from '@/api/login/index'
import { getAesStr, iv, keySize, salt, iterationCount } from '@/util/aesUtil.js'
export default {
  data() {
    function checkChinese(val) {
      // 正则匹配非中英文及数字的字符
      const reg = /[\u4e00-\u9fa5]/
      const n = reg.test(val)
      if (n) {
        return false
      }
      return true
    }
    const validateInputIsChinese = (rule, value, callback) => {
      if (!checkChinese(value)) {
        callback(new Error('不能含有中文'))
      } else {
        callback()
      }
    }

    return {
      loading: false,
      ruleForm: {
        deUserAccount: '',
        dePassWord: '',
        code: ''
      },
      deUserAccount: '',
      dePassWord: '',
      code: '',
      passphrase: '',
      imageUrl: '',
      isRemember: '',
      back: '',
      rules: {
        deUserAccount: [
          { required: true, message: '请输入登录名', trigger: 'blur' },
          { validator: validateInputIsChinese, trigger: 'blur' }
        ],
        dePassWord: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: validateInputIsChinese, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { validator: validateInputIsChinese, trigger: 'blur' }
        ]
      },
      logoUrl: require('../../assets/login/logo.png'),
      imagesIndex: 0,
      imagesList: [
        {
          id: 1,
          url: require('../../assets/login/login-bg1.png')
        },
        {
          id: 2,
          url: require('../../assets/login/login-bg2.png')
        },
        {
          id: 3,
          url: require('../../assets/login/login-bg3.png')
        },
        {
          id: 4,
          url: require('../../assets/login/login-bg4.png')
        },
        {
          id: 5,
          url: require('../../assets/login/login-bg5.png')
        },
        {
          id: 6,
          url: require('../../assets/login/login-bg6.png')
        },
        {
          id: 7,
          url: require('../../assets/login/login-bg7.png')
        }
      ]
    }
  },
  created() {
    this.passphrase = Math.floor(Math.random() * 10000000000 + 1) + ''
  },
  mounted() {
    // this.getCode()
    this.back = this.$route.query.back || ''
    this.startChange()
  },
  methods: {
    login() {
      if (this.loading) return
      const callBackUrl = window.location.protocol + '//' + window.location.host + '/back'
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const params = {
            deuserAccount: getAesStr(this.passphrase, this.ruleForm.deUserAccount),
            depassword: getAesStr(this.passphrase, this.ruleForm.dePassWord),
            iterationCount: iterationCount,
            iv: iv,
            keySize: keySize,
            ciphertext: this.passphrase,
            salt: salt,
            target: this.back || callBackUrl,
            code: this.ruleForm.code
          }
          this.loading = true
          checkLoginByAccount(params).then(res => {
            const data = res.data
            if (data.status === 200) {
              window.location.replace(data.data)
            } else {
              this.$message.error(data.msg)
              // this.getCode()
            }
          }).catch(() => {
            // this.getCode()
          }).finally(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    startChange() {
      setInterval(() => {
        if (this.imagesIndex >= (this.imagesList.length - 1)) {
          this.imagesIndex = 0
        } else {
          this.imagesIndex++
        }
      }, 8000)
    },
    getCode() {
      getCode().then(res => {
        const imgData = res.data || ''
        this.imageUrl = imgData.data
      })
    },
    handleAccount() {
      this.$refs.password && this.$refs.password.focus()
    },
    handlePassword() {
      if (this.$refs.code) {
        this.$refs.code && this.$refs.code.focus()
      } else {
        this.login()
      }
    },
    handleCode() {
      this.login()
    },
    transitionClass(index) {
      let className = ''
      if (index === this.imagesIndex) {
        className = 'fade-out'
      } else if (index - 1 === this.imagesIndex) {
        className = 'fade-in'
      } else if (index === 0 && this.imagesIndex === this.imagesList.length - 1) {
        className = 'fade-in'
      }
      return className
    },
    imgShow(index) {
      let flag = false
      if (index === 0 && this.imagesIndex === this.imagesList.length - 1) {
        flag = true
      } else if (index === this.imagesIndex) {
        flag = true
      } else if (index === this.imagesIndex + 1) {
        flag = true
      }
      return flag
    },
    handleForgetPassword() {
      window.open('http://platauth.pnr.sz:9201/platform/personInfo/initPasswordAction.do?method=initPwd')
    }
  }
}
</script>

  <style scoped >
  .ml20 {
    margin-left: 20px;
  }
  .mb32 {
    margin-bottom: 32px;
  }
  .mt28 {
    margin-top: 28px;
  }
  .mb28 {
    margin-bottom: 28px;
  }
  .ps-r {
    position: relative;
  }
  .mt11 {
    margin-top: 11px;
  }
  .user-info {
    width: 400px;
    padding: 47px 60px;
    border: 1px solid rgba(225, 245, 251, 0.50);
    background: rgba(252, 254, 255, 0.50);
    box-shadow: 0px 4px 20px 5px rgba(42, 74, 70, 0.25);

  }
  .user-info-title {
    font-family: Arimo;
    font-size: 40px;
    color: #4D5E6F;
    letter-spacing: 4px;
    text-align: center;
    line-height: 32px;
    font-weight: 600;
    text-transform: capitalize;
  }
  .user-info-subtitle {
    font-size: 18px;
    color: #7791A5;
    letter-spacing: 0.36px;
    line-height: 18px;
    font-weight: 400;
    margin-bottom: 10px;
  }
  .con-btn {
    font-family: PingFangSC-Medium;
    background: #307E86;
    color: #fff;
    font-weight: 400;
    width: 100%;
    height: 64px;
    line-height: 64px;
    text-align: center;
    border: 0;
    font-size: 24px;
    cursor: pointer;
    font-weight: 500;
    margin-top: 36px;
  }
  ::v-deep .user-name-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background: url('../../assets/login/user.png');
    background-size:100% 100% ;
  }
  ::v-deep  .password-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background: url('../../assets/login/pwd.png');
    background-size:100% 100% ;
  }

  ::v-deep  .code-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background: url('../../assets/login/email.png');
    background-size:100% 100% ;
  }
  ::v-deep .el-input--prefix .el-input__inner {
    padding-left: 48px;
    border: 0;
    font-size: 16px;
    font-weight: normal;
  }
  .input-box {
    background: #F5FEFF;
  }
  ::v-deep .el-input__inner {
    height: 55px;
    line-height: 55px;
    background-color: #F5FEFF;
    transition:  background-color 50000s ease-in-out 0s;
  }
  ::v-deep .el-input__prefix {
    display: flex;
    align-items: center;
    width: 40px;
    justify-content: center;
  }
  .input-code-box {
    position: relative;
    padding-right: 100px;
  }
  .flexbox {
    display: flex;
  }
  .flexbox .input-code-box {
    flex: 1;
  }
  .code-img-box {
    width: 94px;
    background: #fff;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .code-img {
    width: 94px;
    height: 34px;
  }
  ::v-deep .remember-account {
    font-size: 14px;
    color: #4D5E6F;
    letter-spacing: 0.32px;
    line-height: 14px;
    font-weight: 400;
    display: flex;
    justify-content: space-between;
  }
  ::v-deep .remember-account .el-checkbox__label {
        font-size: 14px;
        line-height: 14px;
        color: #4D5E6F;
        letter-spacing: 0.32px;
    }
  ::v-deep .el-checkbox__inner {
      background: transparent;
      border-color: rgba(145,153,170,0.5);
  }
  ::v-deep .el-checkbox__input {
      height: 14px;
  }
  ::v-deep .el-checkbox__input.is-checked {
      background-color: #307E86;
      border-color:#307E86;
  }
  ::v-deep .el-form-item {
    margin-bottom: 0;
  }
  .forgot-password-btn {
    font-size: 14px;
    color: #4D5E6F;
    letter-spacing: 0.32px;
    line-height: 14px;
    font-weight: 400;
    cursor: pointer;
  }

  .login-box {
    display: flex;
  }
  .login-box-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
  }
  .login-box-bg img {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
  }

  .login-left-bg {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 6;
  }
  .login-bg{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 4;
    /* -webkit-animation-duration: 2s;
    animation-duration: 2s; */
    /* -webkit-animation-fill-mode: both;
    animation-fill-mode: both; */
    /* -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown; */
    /* animation: fadeOutLeft 3s 1s infinite; */
  }
  .login-left {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .login-left .logo-img {
    padding-top: 100px;
    width: 880px;
    height: 260px;
    margin-left: 30px;
    z-index: 10;
  }
  .login-right {
    height: 100vh;
    display: flex;
    align-items: center;
    margin-right: 160px;
    position: relative;
    z-index: 10;
  }

  @keyframes fadeOutLeft {
      0% {
          /* opacity: 1; */
          transform: translateX(564px);
      }
      10% {
          /* opacity: 1; */
          transform: translateX(564px);
      }
      75% {
          /* opacity: 1;
          transform: translateX(234px); */
          transform: translateX(234px);
      }
      100% {
          transform: translateX(234px);
      }
  }
  @keyframes fadeIns {
      0% {
          opacity: 0;
      }
      75% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }
  @keyframes fadeOuts {
      0% {
        opacity: 1;
      }
      75% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
  }
    /* 淡入效果样式 */
    .fade-in {
        animation: fadeIns 8s 0s infinite;
        /* transform: translateX(234px); */
    }
    .fade-in .login-bg {
          transform: translateX(564px)
      }

    /* 淡出效果样式 */
    .fade-out {
        animation: fadeOuts 8s 0s infinite;
        /* transform: translateX(564px); */

    }
    .fade-out .login-bg {
        z-index: 5;
        transform: translateX(564px);
        animation: fadeOutLeft 8s 0s ease-in-out;
    }
  </style>
<style>
.slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.slider-item {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.flip-list-enter-active .slider-item, .flip-list-leave-active .slider-item{
   transition: all 1s linear;
}
.flip-list-enter .slider-item, .flip-list-leave-to .slider-item{
    opacity: 0;
}
.flip-list-enter-to .slider-item, .flip-list-leave .slider-item{
    opacity: 1;
}
</style>
